{% extends "base.html" %}
{% block title %}<title>刘旭的博客</title>{% endblock %}
{% block body1 %}{% include "nav.html" %}{% endblock %}
{% block bodyside %}
<div class="sidebar-module sidebar-module-inset">
<a href="/blogwrite">添加文章</a>
</div>
<div class="sidebar-module sidebar-module-inset">
    <h3>置顶文章</h3>
</div>
    <div class="sidebar-module sidebar-module-inset" id="toptitle"></div>
{% endblock %}
{% block bodymain %}
{% for i in bloglist %}
<div class="row" >
    <div class="col-sm-4"><img src="/static/images/0003.jpg" class="img-responsive"style="margin:10px"></div>
    <div class="col-sm-8">
        <div class="read-more cl-effect-14" >
            <h4 class="blog-post-title">
                <a href="/blog/{{i.id}}" id="title">{{i.btitle|safe}}</a>
            </h4>
        </div>
        <div class="row">
            <div class="col-sm-3" >
                <spna class="glyphicon glyphicon-user"> {{i.bauthor}}</spna>
            </div>
            <div class="col-sm-3" >
                <span class="glyphicon glyphicon-time">{{i.bdate|date:'Y-m-d'}}</span>
            </div>
            <div class="col-sm-2" >
                <span class="glyphicon glyphicon-eye-open">{{i.bview}}</span>
            </div>
            <div class="col-sm-2" >
                <spna class="glyphicon glyphicon-comment">{{i.bcomment}}</spna>
            </div>
        </div>
        <p>
            <span class="content" id="content">{{i.btopic}}...</span>
            <span class="muted"><a  href="/blog/{{i.id}}" role="button">阅读全文 »</a></span>
        </p>
    </div>
</div>
{% endfor %}
{% endblock %}
{% block script %}<script>
$(document).ready(function(){
    $.getJSON("/json/blog/list",function (data){
        var list=data.bloglist;
        var blogstr="";
        for(var i = 0;i<list.length;i++){
            blogstr=blogstr+'<a href="/blog/'+list[i].id+'">'+list[i].btitle+"</a><br>";
            }
        $('#toptitle').html(blogstr);
    });
});
</script>{% endblock %}